<template>
    <van-skeleton title :row="9" v-if="loading">
    </van-skeleton>
    <div :key="mineKeys" v-else>
        <ul class="commitUl">
            <li v-for="(item) in commentsList" :key="item.commentId">
                <div class="topDiv">
                    <van-col span="3" class="left">
                        <img :src="item.avatar" alt="" class="avatar">
                    </van-col>
                    <van-col span="21" class="right">
                        <div><p class="userName">{{item.userName}}</p><p class="more" @click="remove(item.commentId,item.userId)">删除</p></div>
                        <p>{{item.commentContent}}</p>
                        <div>
                            <div class="innerLeft">{{item.createdTime}}</div>
                            <div class="innerRight">
                                <div class="reply" @click = 'replyShow(item.commentId,item.userName,item.avatar,item.commentContent,item.createdTime)' style="margin-top: -3px">
                                    查看回复
                                </div>
                                <div class="like">
                                    <van-icon name="like" /> {{item.zan}}
                                </div>
                            </div>
                        </div>
                    </van-col>
                </div>

            </li>
        </ul>
        <ul class="replyUl" v-if="isReplyList" >
            <li>
                <div class="topDiv">
                    <van-col span="3" class="left">
                        <img :src="avatar" class="avatar">
                    </van-col>
                    <van-col span="21" class="right">
                        <div><p class="userName">{{username}}</p><p class="more">层主</p></div>
                        <p>{{commentContent}}</p>
                        <div>
                            <div class="innerLeft">{{createdTime}}</div>
                        </div>
                    </van-col>
                </div>
            </li>
            <li v-if="isShowCold" style="text-align: center">回复一下层主，别让他太冷~~~~~</li>
            <li v-else v-for="(items,indexs) in replyComments" :key="indexs" class="innerReply" >
                <van-col span="3" class="left">
                    <img :src="items.avatar" alt="" class="avatar">
                </van-col>
                <van-col span="21" class="right">
                    <div><p class="userName">{{items.userName}}</p><p class="more" @click="remove(items.commentId,items.userId)">删除</p></div>
                    <p>{{items.commentContent}}</p>
                    <div>
                        <div class="innerLeft">{{items.createdTime}}</div>
                    </div>
                </van-col>
            </li>
            <p @click="moreReply">{{messages}}</p>
        </ul>
        <p @click="getMore">{{message}}</p>
        <div class="replyInputOuter" v-if="$store.state.isReplyShow">
            <van-col span="14">
                <div class="leftReplyInput">
                    <div class="imgAvatar">
                        <img :src="$store.state.userInfo.avatar" alt="">
                    </div>
                </div>
                <input type="text" class="replyInput" v-model="inputComment" :placeholder= placeholder>
            </van-col>
            <van-col span="5">
                <button @click="sendReply" class="publication">发表</button>
            </van-col>
            <van-col span="5">
                <button @click="notSend" class="publication">取消</button>
            </van-col>
        </div>

    </div>

</template>

<script>
    import {commentsList, getinformain, removeComment, replyCommentsList, replyCommit} from "../api/api";
    import {Dialog, Toast} from 'vant';

    export default {
        name: "DetailCommit",

        data(){
            return{
                loading: true,
                isRouterAlive: true,
                commentsList:'',
                commentId:'',
                mineKeys:0,
                isShow:false,
                avatar:'',
                inputComment:'',
                placeholder:'',
            //    回复列表
                replyComments:[],
            //    评论id
                pageNum:1,
                pageSize:5,
                pageNums:1,
                pageSizes:5,
                message:'点击加载更多评论',
                messages:'点击加载更多回复',
                isReplyList:false,
                username:'',
                commentContent:'',
                createdTime:'',
                isShowCold:false
            }
        },
        methods:{
            remove(ids,userId){

                console.log(ids)
                console.log(userId)
                Dialog.confirm({
                    message: '确认删除评论？'
                })
                    .then(() => {
                        // on confirm
                        const removeToast = Toast.loading({
                            duration:0,
                            message: '删除中...',
                            forbidClick: true,
                            loadingType: 'spinner',
                        });
                        getinformain().then(res=>{
                            if(res.data.code == 0){
                                if(userId == res.data.data.userId){
                                    removeComment(ids).then(res=>{
                                        console.log(res)
                                        commentsList(this.$route.query.postsId,this.pageNum,this.pageSize).then(res => {
                                            this.commentsList = res.data.rows
                                        })
                                        replyCommentsList(this.commentId).then(res => {
                                            this.replyComments=res.data.rows
                                            console.log(res)
                                        })
                                        Toast.success("删除成功");
                                        removeToast.clear()
                                    })
                                }else{
                                    Toast.fail('想删别人评论？想啥呢');
                                    removeToast.clear()
                                }
                            }else{
                                Toast.fail('请先登录');
                                removeToast.clear()
                            }

                        })

                    })
                    .catch(() => {
                        // on cancel
                    });


            },
            replyShow(mineCommentId,username,avatar,commentContent,createdTime){
                const replyShowToast = Toast.loading({
                    duration:0,
                    message: '加载中...',
                    forbidClick: true,
                    loadingType: 'spinner',
                });

                this.placeholder = '回复' + username
                this.username = username
                this.avatar = avatar
                this.commentContent = commentContent
                this.createdTime = createdTime
                this.$store.commit("changeIsReplyShow",{isReplyShow:true})
                this.commentId = mineCommentId
                //回复列表
                replyCommentsList(mineCommentId,this.pageSizes,this.pageNums).then(res => {
                    this.replyComments=res.data.rows
                    console.log(this.replyComments)
                    if(this.replyComments.length == 0){
                        this.isReplyList = true
                        this.isShowCold = true
                        replyShowToast.clear()
                        Toast.success('加载成功');
                    }else{
                        this.isReplyList = true
                        this.isShowCold = false
                        replyShowToast.clear()
                        Toast.success('加载成功');
                    }

                })
            },
            //提交回复
            sendReply(){
                const sendReplyToast = Toast.loading({
                    duration:0,
                    message: '发表中...',
                    forbidClick: true,
                    loadingType: 'spinner',
                });
                replyCommit(this.$route.query.postsId,this.commentId,this.inputComment).then(res => {
                    console.log(res)
                    if(res.data.code == 403){
                        Dialog.confirm({
                            message: '还未登录，去登录？',
                        })
                            .then(() => {
                                // on confirm
                                this.$router.push('/pwdlogin')
                            })
                            .catch(() => {
                                // on cancel
                            });
                    }else{
                        replyCommentsList(this.commentId,this.pageSizes,this.pageNums).then(res => {
                            this.replyComments=res.data.rows
                            this.inputComment=''
                            sendReplyToast.clear()
                            Toast.success('发表成功');
                            this.isShowCold = false
                        })
                    }

                })
            },
            //点击加载更多回复
            moreReply(){
                const moreReplyToast = Toast.loading({
                    duration:0,
                    message: '加载中...',
                    forbidClick: true,
                    loadingType: 'spinner',
                });
                this.pageSizes+=5
                replyCommentsList(this.commentId,this.pageSizes,this.pageNums).then(res => {
                    this.replyComments=res.data.rows
                    if(res.data.rows.length == res.data.total){
                        this.messages = "没有更多了"
                        moreReplyToast.clear()
                    }
                })
            },
        //    取消
            notSend(){
                this.$store.commit("changeIsReplyShow",{isReplyShow:false})
                this.isReplyList = false,
                this.messages = "点击加载更多回复"
            },
            //点击加载更多
            getMore(){
                const moreToast = Toast.loading({
                    duration:0,
                    message: '加载中...',
                    forbidClick: true,
                    loadingType: 'spinner',
                });
                this.pageSize += 5,
                    commentsList(this.$route.query.postsId,this.pageNum,this.pageSize).then(res => {
                        console.log(res)
                        this.commentsList = res.data.rows
                        // console.log(this.commentsList)
                        this.commentsList.forEach(value=>{
                            replyCommentsList(value.commentId).then(res => {
                                this.replyComments.push(res.data.rows)
                            })
                        })
                        if(res.data.rows.length == res.data.total){
                            this.message = "没有更多了"
                            moreToast.clear()
                        }

                    })
            },

        },
        created() {
            this.avatar = this.$store.state.userInfo.avatar
            commentsList(this.$route.query.postsId,this.pageNum,this.pageSize).then(res => {
                this.commentsList = res.data.rows
                this.loading = false
            })
        }
    }
</script>

<style scoped>
    .commitUl>li{
        /*height: 50px;*/
        margin-top: 10px;
        padding-bottom: 10px;
        overflow: hidden;
        /*border-bottom: 1px solid #999;*/
        box-shadow: 0px 2px 5px #bbb;

    }

    .topDiv{
        overflow: hidden;
    }
    ul>li img{
        width: 36px;
        height: 36px;
    }
    .commitUl>li{
        /*position: relative;*/
        padding-left: 6px;
    }
    .replyUl{
        max-height: 70%;
        position: fixed;
        bottom: 54px;
        left: 0;
        right: 0;
        border-radius: 5px;
        overflow: scroll;
        width: 100%;
        box-shadow: -2px -2px 5px #bbb;
        background-color: #fefefe;
    }
    .replyUl>li{
        overflow: hidden;
        padding: 10px 0px 10px 10px;
        border-bottom: 2px solid #ccc;
    }
    .left{
        margin-top: 6px;
        width: 36px;
        height: 36px;
        overflow: hidden;
        border-radius: 50%;
    }
    .right{
        padding-left: 10px;
    }
    .right>div{
        color: #999;
        overflow: hidden;
    }
    .right>div:nth-child(1){
        overflow: hidden;
    }
    .userName{
        float: left;
    }
    .more{
        float: right;
    }
    .innerLeft{
        float: left;
    }
    .innerRight{
        float: right;
        overflow: hidden;
    }
    .reply{
        float: left;
        margin-right: 10px;
    }
    .like{
        float: right;
    }

    .replyInputOuter{
        box-shadow: 0 -2px 2px #ccc;
        background-color: white;
        padding: 10px 0px 10px 10px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .leftReplyInput{
        background-color: #ddd;
        border-radius: 15px 0 0 15px;
        /*border: 1px solid red;*/
        box-sizing: border-box;
        width: 15%;
        height: 34px;
        overflow: hidden;
        float: left;
    }
    .imgAvatar{
        float: left;
        margin: 4px 0 0 5px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        overflow: hidden;
    }
    .imgAvatar>img{
        width: 100%;
        height: 100%;
    }
    .replyInput{
        float: left;
        width: 80%;
        height: 32px;
        border-radius: 0 15px 15px 0;
        background-color: #ddd;
        border: 0;
        outline: 0;
    }
    .innerReply{
        margin-left: 5%;
        width: 92%;
    }


</style>